<!-- MyModal.vue -->

<template>
  <view class="my-modal" v-if="showCustomTips.show">
    <view class="modal-content">
      <view v-if="showCustomTips.title" class="title">
        {{ showCustomTips.title }}
      </view>
      <view class="content">
        {{ showCustomTips.content }}
      </view>
      <view class="btn-wrap bh-row bh-justify-space-between">
        <view v-if="showCustomTips.cancelText" class="btn-cancel" :style="{color:showCustomTips.cancelColor}" @click="clickBtn('cancel')">{{ showCustomTips.cancelText }}</view>
        <view v-if="showCustomTips.cancelText" style="background: #EBEDF0;width: 1rpx;"></view>
        <view class="btn-confirm" :style="{color:showCustomTips.confirmColor}" @click="clickBtn('confirm')">{{ showCustomTips.confirmText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "showCustomTips",
  mixins: [],
  props: {
  },
  data() {
    return {
      // showCustomTips: this.$store.state.showCustomTips
    }

  },
  computed: {
    showCustomTips(){
      return this.$store.state.showCustomTips
    }
  },
  methods: {
    closeModal() {
      this.$emit('close');
    },
    clickBtn(res) {
      this.$store.commit('successShowCustomTips', res)
    }
  },
};
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

.my-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  // z-index: 3;
  z-index: 9999;
}

.modal-content {
  border-radius: 16rpx;

  opacity: 1;

  background: #FFFFFF;
  width: 622rpx;
  text-align: center;
}
.title{
font-size: 32rpx;
font-weight: 500;
line-height: 44rpx;

color: #323233;
margin-top: 48rpx;
}
.content {
  padding: 48rpx;
  font-size: 32rpx;
  font-weight: normal;
  line-height: 44rpx;
  text-align: center;

  color: #333333;
  border-bottom: 1px solid #EBEDF0;
  white-space: pre-wrap;
}

.btn-wrap {
  opacity: 1;

  background: #FFFFFF;
  align-items: stretch;
  // padding-top: 24rpx;
  // padding-bottom: 24rpx;
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  text-align: center;

  .btn-cancel {
    // padding-top: 24rpx;
    // padding-bottom: 24rpx;
    // flex: 1;
    // font-size: 32rpx;
    // font-weight: normal;
    color: #666666;
	
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	flex: 1;
	
	font-size: 32rpx;
	font-weight: 600;
	
	// color: rgba(0, 0, 0, 0.85);
	
	border-radius: 36rpx;
	opacity: 1;
	// background: #F8D247;
	// margin: 0 48rpx;
	// margin-bottom: 32rpx;
	margin: 16rpx 48rpx 16rpx;
  }

  .btn-confirm {
    padding-top: 24rpx;
    padding-bottom: 24rpx;
    flex: 1;

    font-size: 32rpx;
    font-weight: 600;

    color: rgba(0, 0, 0, 0.85);

    border-radius: 36rpx;
    opacity: 1;
    background: #F8D247;
    // margin: 0 48rpx;
    // margin-bottom: 32rpx;
	margin: 16rpx 48rpx 16rpx;
  }
}</style>
